<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SmartInput - SSL证书接受指南</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background: #f8fafc;
            line-height: 1.6;
        }
        .container {
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #dc2626;
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px;
        }
        .error-box {
            background: #fef2f2;
            border: 1px solid #fecaca;
            border-radius: 8px;
            padding: 15px;
            margin: 20px 0;
            color: #dc2626;
        }
        .step {
            margin: 20px 0;
            padding: 15px;
            border-left: 4px solid #2563eb;
            background: #f8fafc;
            border-radius: 0 8px 8px 0;
        }
        .step h3 {
            margin: 0 0 10px 0;
            color: #1e40af;
            font-size: 18px;
        }
        .url-button {
            display: inline-block;
            padding: 10px 15px;
            background: #dc2626;
            color: white;
            text-decoration: none;
            border-radius: 6px;
            margin: 8px 5px;
            font-family: monospace;
            font-size: 14px;
            transition: background 0.2s;
        }
        .url-button:hover {
            background: #b91c1c;
        }
        .warning {
            background: #fefce8;
            border: 1px solid #fde68a;
            border-radius: 8px;
            padding: 15px;
            margin: 15px 0;
            color: #92400e;
        }
        .success {
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
            border-radius: 8px;
            padding: 15px;
            margin: 15px 0;
            color: #166534;
        }
        .screenshot {
            text-align: center;
            margin: 20px 0;
            padding: 15px;
            background: #f1f5f9;
            border-radius: 8px;
        }
        .screenshot img {
            max-width: 100%;
            border: 1px solid #cbd5e1;
            border-radius: 4px;
        }
        .code {
            background: #1e293b;
            color: #e2e8f0;
            padding: 12px;
            border-radius: 6px;
            font-family: monospace;
            margin: 10px 0;
        }
        .reload-button {
            background: #10b981;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px 5px;
            transition: background 0.2s;
        }
        .reload-button:hover {
            background: #059669;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔒 SSL证书接受指南</h1>
        
        <div class="error-box">
            <strong>❌ 连接错误</strong><br>
            浏览器扩展无法连接到SmartInput服务器，这通常是因为HTTPS自签名证书未被接受。
        </div>

        <div class="step">
            <h3>步骤1: 接受SSL证书</h3>
            <p>请<strong>依次点击</strong>下面的每个链接，并在每个页面中接受SSL证书：</p>
            
            <div>
                <a href="https://localhost:3001/health" target="_blank" class="url-button">
                    🔗 https://localhost:3001/health
                </a>
            </div>
            <div>
                <a href="https://127.0.0.1:3001/health" target="_blank" class="url-button">
                    🔗 https://127.0.0.1:3001/health
                </a>
            </div>
            <div>
                <a href="https://192.168.3.17:3001/health" target="_blank" class="url-button">
                    🔗 https://192.168.3.17:3001/health
                </a>
            </div>
        </div>

        <div class="step">
            <h3>步骤2: 处理证书警告</h3>
            <p>当你点击上面的链接时，会看到类似这样的警告页面：</p>
            
            <div class="warning">
                <strong>⚠️ "您的连接不是私密连接"</strong><br><br>
                请按以下步骤操作：<br>
                1. 点击 <strong>"高级"</strong> 按钮<br>
                2. 点击 <strong>"继续前往 localhost (不安全)"</strong><br>
                3. 看到JSON响应表示成功
            </div>

            <div class="screenshot">
                <p><strong>预期的成功响应：</strong></p>
                <div class="code">
                    {"success":true,"data":{"status":"ok","timestamp":"...","uptime":...}}
                </div>
            </div>
        </div>

        <div class="step">
            <h3>步骤3: 重新加载浏览器扩展</h3>
            <p>接受所有证书后，需要重新加载浏览器扩展：</p>
            
            <ol>
                <li>打开新标签页，访问 <code>chrome://extensions/</code></li>
                <li>找到 <strong>SmartInput</strong> 扩展</li>
                <li>点击 <strong>"重新加载"</strong> 按钮 🔄</li>
                <li>或者点击下面的按钮：</li>
            </ol>
            
            <button class="reload-button" onclick="reloadExtension()">
                🔄 重新加载扩展
            </button>
        </div>

        <div class="step">
            <h3>步骤4: 验证连接</h3>
            <p>重新加载扩展后：</p>
            <ol>
                <li>点击浏览器工具栏中的SmartInput图标</li>
                <li>查看连接状态是否显示 <strong>"已连接"</strong></li>
                <li>如果仍然显示未连接，请重复上述步骤</li>
            </ol>
        </div>

        <div class="success">
            <strong>✅ 成功标志</strong><br>
            当所有步骤完成后，你应该能看到：<br>
            • 扩展显示"已连接"状态<br>
            • 可以正常生成配对码<br>
            • 手机应用可以成功配对
        </div>

        <div class="warning">
            <strong>💡 故障排除</strong><br><br>
            如果仍然无法连接：<br>
            1. 确保SmartInput服务器正在运行<br>
            2. 检查是否所有HTTPS链接都已访问并接受证书<br>
            3. 尝试重启浏览器<br>
            4. 检查防火墙设置
        </div>
    </div>

    <script>
        function reloadExtension() {
            // 尝试重新加载扩展
            if (chrome && chrome.runtime) {
                chrome.runtime.reload();
            } else {
                alert('请手动前往 chrome://extensions/ 重新加载SmartInput扩展');
            }
        }

        // 页面加载时检查服务器状态
        window.onload = async function() {
            const urls = [
                'https://localhost:3001/health',
                'https://127.0.0.1:3001/health',
                'https://192.168.3.17:3001/health'
            ];

            console.log('🔍 检查服务器连接状态...');
            
            for (const url of urls) {
                try {
                    const response = await fetch(url);
                    if (response.ok) {
                        console.log(`✅ ${url} - 连接成功`);
                    }
                } catch (error) {
                    console.log(`❌ ${url} - 需要接受证书`);
                }
            }
        };
    </script>
</body>
</html>
